跳到主要内容

导入资源(Importing Assets)

通过拖放方式将您的资源导入到 Rive 编辑器中。您可以导入 SVG、JSON、PNG、PSD 和 JPG 格式。

Youtube

Youtube

资源面板(Assets Panel)

将图形拖入后,它们会出现在编辑器 UI 左侧的资源面板中。将它们拖放到画板上即可开始使用。

导入自定义字体(Importing Custom Font)

对于专业版用户,您可以添加自定义字体以用于我们的文本工具(Text Tool)。将您的 .OTF 或 .TTF 文件拖放到编辑器中,或使用字体部分旁边的加号按钮。

更新图像资源(Updating Image Assets)

您可以在导入后更新图像。

通过在资源面板中选择图像来执行此操作;资源的属性会显示在检查器中,对于光栅资源(PNG、JPG、PSD),会有一个"替换"(Replace)按钮可用。

点击替换按钮,在提示时选择更新后的图像。您会注意到这会更新文件中使用的所有该图形实例。

支持的格式(Supported Formats)

Rive 支持导入 SVG(见下面的限制)、JSON、PNG、PSD 和 JPG 格式。

直接从 Figma 复制粘贴(Copy and Paste Directly from Figma)

您可以使用"复制为 SVG"(copy as SVG)并直接粘贴到 Rive 编辑器中。

图片

导入 Lottie 文件(Import Lottie File)

您可以将 Lottie 动画导入到 Rive 中。首先,将您的 Lottie JSON 文件拖放到 Rive 编辑器中。这会将其添加到您的资源面板。

图片

从那里,您可以将其拖入现有画板或拖入空白区域以创建新画板。

图片

如果您在运行时遇到问题,您可能需要将任何 PlusAddHard Mix 图层混合模式转换为 Rive 运行时支持的混合模式。

SVG 技巧(SVG Tips)

SVG 是一种非常灵活且功能丰富的格式。我们努力尽可能地支持 SVG;但是,目前有一些功能我们不支持。

使用内联样式而不是 CSS 导出 SVG 文件将最适合我们的导入器。

从其他设计工具导出时,寻找在导出时保留形状 ID 和名称的选项。这将确保您导入的文件保持相同的结构和图层名称。大多数工具都有这个选项,如下面的 Figma 示例所示。

图片

Photoshop:

从 Photoshop 导出时,确保您只使用矢量图层。不要将任何内容转换或扁平化为光栅。

Illustrator:

使用"另存为"从 Illustrator 导出 SVG 时,在 SVG 选项中将 CSS 属性设置为"表示属性"(Presentation Attributes)而不是默认设置。同样,使用"导出为"从 Illustrator 导出 SVG 时,在 SVG 选项中将样式设置为"表示属性"。请注意,当直接从 Illustrator 复制时,Illustrator 使用"导出为"SVG 选项,因此如果您要从 Illustrator 复制粘贴到 Rive 编辑器,请确保在 SVG 选项中将样式设置为"表示属性"。

此外,禁用"保留 Illustrator 编辑功能"选项,因为这会使您的文件变得更大,并添加我们的导入器无法识别的数据。

已知问题(Known Issues):

  • 嵌入的图像会被忽略。我们计划实现这个功能(更多信息,请参见此处)。
  • 渐变变换被忽略。
    • 我们目前无法在我们的运行时中为此提供相同的支持,因此不支持此功能。
    • 但是,我们支持线性和径向渐变,这可以覆盖一些用例。
  • Rive 没有点(pt)或毫米(mm)尺寸的概念。使用 pt 或 mm 提供尺寸的 SVG 将其值转换为像素(px)。点转换为 1.33 px,毫米转换为 3.78 px。
  • SVG 提供 inherit 让描边和填充使用其祖先的颜色。Rive 不支持这一点,任何继承的颜色默认为白色。
  • 其他不支持的 SVG 功能:
    • stroke-dasharray - 您可能会看到实线描边
    • mask - 我们将其视为剪切
    • filter
    • skew